<template>
  <div class="container">
    <topTitle
      titleText="考勤设备移机"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <el-link type="primary" class="moveSty" @click="moveMachineLog"
      >移机操作日志</el-link
    >
    <!-- <el-row class="titleBox clearfix">
      <i class="icon iconfont iconfanhui1" @click="goBack"></i>
      <span class="blockTitle">考勤设备移机</span>
      <el-link
        type="primary"
        class="fr"
        @click="moveMachineLog"
      >移机操作日志</el-link>
    </el-row> -->
    <div class="mainCon">
      <el-row>
        <el-col :span="24">
          <div class="secondaryTitle secondaryTitleTheme">考勤设备信息</div>
        </el-col>
      </el-row>
      <el-row class="detailInfo">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-row class="detailInfoItem">
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">设备类型：</div>
              </el-col>
              <el-col :span="5" class="information">
                <div class="grid-content">{{ machineInfo.typeValue }}</div>
              </el-col>
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">设备SN编码：</div>
              </el-col>
              <el-col :span="5" class="information">
                <div class="grid-content">{{ machineInfo.machineNo }}</div>
              </el-col>
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">授权码：</div>
              </el-col>
              <el-col :span="4" class="information">
                <div class="grid-content">
                  {{ machineInfo.authCode || '--' }}
                </div>
              </el-col>
            </el-row>
            <el-row class="detailInfoItem">
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">服务项目：</div>
              </el-col>
              <el-col :span="5" class="information">
                <div class="grid-content">{{ machineInfo.projectName }}</div>
              </el-col>
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">项目工点名称：</div>
              </el-col>
              <el-col :span="5" class="information">
                <div class="grid-content">
                  {{ machineInfo.pointName || '--' }}
                </div>
              </el-col>
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">工点成功拉取人数：</div>
              </el-col>
              <el-col :span="4" class="information">
                <div class="grid-content">{{ machineInfo.downEmpCount }}</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="secondaryTitle secondaryTitleTheme">移机设置</div>
        </el-col>
      </el-row>
      <el-row class="detailInfo">
        <el-form
          :model="machineForm"
          :rules="machineFormRules"
          ref="machineForm"
          label-width="100px"
          class="form"
        >
          <el-form-item
            label="新项目"
            prop="projectId"
            class="row-padding-bottom"
          >
            <el-select
              v-model="machineForm.projectId"
              clearable
              filterable
              placeholder="请选择"
              class="selectWidth"
              @visible-change="handleChange"
              :disabled="isDisabled"
              remote="true"
              :remote-method="remoteMethod"
            >
              <el-option
                v-for="(item, index) in projectList"
                :key="index"
                :label="item.projectName"
                :value="index"
              ></el-option>
              <div class="block">
                <el-pagination
                  layout="prev, pager, next"
                  :total="total"
                  :current-page.sync="pageNo"
                  :page-size="pageSizeNumber"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                ></el-pagination>
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="安装单位" prop="uscc" class="row-padding-bottom">
            <el-input
              v-model="machineForm.companyName"
              class="selectWidth"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="打卡点"
            class="row-padding-bottom"
            prop="pointId"
            v-if="machineInfo.type == 'zk' || machineInfo.type == 'yf'"
          >
            <el-select
              v-model="machineForm.pointId"
              placeholder="请选择"
              clearable
              class="selectWidth"
            >
              <el-option
                v-for="(item, index) of points"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="进出方向"
            class="row-padding-bottom"
            prop="direction"
            v-if="machineInfo.type != 'yfscs'"
          >
            <el-select
              v-model="machineForm.direction"
              placeholder="请选择"
              clearable
              class="selectWidth"
            >
              <el-option label="无方向" value="-1"></el-option>
              <el-option label="出门" value="0"></el-option>
              <el-option label="进门" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="操作人"
            class="row-padding-bottom"
            prop="operator"
          >
            <el-input
              placeholder="请输入操作人姓名"
              clearable
              class="selectWidth"
              v-model="machineForm.operator"
              @blur="machineForm.operator = changeValue($event)"
            />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              placeholder="请输入备注"
              class="selectWidth"
              v-model="machineForm.remark"
              maxlength="100"
              row="3"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="goBack" size="medium" class="cancelBtn"
              >取消</el-button
            >
            <el-button
              size="medium"
              class="submitBtn listAddBtn"
              @click.native="save"
              :loading="isSaveLoading"
              >保存</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <el-dialog
      title="移机操作日志"
      :visible.sync="logVisible"
      :close-on-click-modal="false"
      width="80%"
      @close="logHandleClose"
      :append-to-body="true"
      :modal-append-to-body="false"
    >
      <el-row>
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            align="center"
            prop="createTime"
            label="操作时间"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="preProjectName"
            label="迁移前项目"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="projectName"
            label="迁移后项目"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="machineNo"
            label="设备SN编号"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="operatorAccount"
            label="操作账号"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="operator"
            label="操作人"
            :formatter="formatTd"
          ></el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :requestUrl="requestUrl"
          :filterField="filterField"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'moveMachine',
  data() {
    return {
      id: '',
      projectId: '',
      points: [], //工点列表
      installUnitList: [],
      isDisabled: false,
      projectList: [], //项目名称下来列表
      pageSizeNumber: 20,
      pageNo: 1,
      total: 0,
      machineInfo: {},
      machineForm: {
        projectId: '',
        companyName: '',
        uscc: '',
        pointId: '',
        operator: '',
        remark: '',
        authCode: '',
        type: '',
        machineNo: '',
        direction: '',
      },
      machineFormRules: {
        projectId: [
          { required: true, message: '项目名称不能为空', trigger: 'change' },
        ],
        uscc: [
          { required: true, message: '安装单位不能为空', trigger: 'change' },
        ],
        direction: [
          { required: true, message: '进出方向不能为空', trigger: 'change' },
        ],
        pointId: [
          { required: true, message: '打卡点不能为空', trigger: 'change' },
        ],
        operator: [
          { required: true, message: '操作人不能为空', trigger: 'blur' },
        ],
      },
      isSaveLoading: false,
      logVisible: false,
      requestUrl: 'api-att/cs/macLog/expand/list', //表格请求路径。
      loading: false,
      isShow: false,
      tableData: [], //表格数据
      filterField: {
        machineNo: '',
      },
      logPageSize: 20,
      logPageNo: 1,
      back: true,
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getUpdateData(this.id)
    this.getProjectList(this.pageNo, this.pageSizeNumber, '')
  },
  methods: {
    moveMachineLog() {
      this.filterField.machineNo = this.machineInfo.machineNo
      this.logVisible = true
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
      })
    },
    getProjectList(pageNo, pageSizeNumber, val) {
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/list',
        data: {
          pageNo: pageNo,
          pageSize: pageSizeNumber,
          projectName: val,
          isSa: '',
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.projectList = response.data.result.results
              this.total = response.data.result.total
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.getProjectList(val, this.pageSizeNumber, this.projectId)
    },
    handleChange(val) {
      if (!this.machineForm.projectId && this.machineForm.projectId !== 0) {
        if (val) {
          this.pageNo = 1
          this.projectId = ''
          this.machineForm.projectId = ''
          this.getProjectList(this.pageNo, this.pageSizeNumber, this.projectId)
        }
        this.machineForm.uscc = ''
        this.installUnitList = []
      } else {
        if (typeof this.machineForm.projectId === 'string') {
          this.machineForm.projectId = ''
        } else {
          var projectData = this.projectList[this.machineForm.projectId]
          var projectId = projectData.projectId
          this.projectId = projectId
          this.machineForm.uscc = ''
          this.machineForm.pointId = ''
          this.getCompanyList(projectId)
          this.getPoints(projectId)
        }
      }
    },
    remoteMethod(query) {
      if (query) {
        // this.searchVal = query;
        this.getProjectList(1, this.pageSizeNumber, query)
      }
    },
    getCompanyList(projectId) {
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/findconstructor',
        data: {
          projectId: projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.installUnitList = res.data.result
              this.machineForm.companyName = res.data.result[0].name
              this.machineForm.uscc = res.data.result[0].code
            } else {
              // this.$message.error("安装单位数据获取失败");
            }
          },
          (res) => {
            this.$message.error('安装单位数据获取失败')
          }
        )
        .catch((error) => {
          this.$message.error('安装单位数据获取失败')
        })
    },
    getPoints(projectId) {
      this.axios({
        method: 'post',
        url: 'api-att/cs/point/expand/list',
        data: { projectId: projectId },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.points = res.data.result.results
          }
        })
        .catch(() => {
          this.$message.error('获取数据失败')
        })
    },
    save() {
      this.$refs['machineForm'].validate((valid) => {
        if (valid) {
          const h = this.$createElement
          this.$msgbox({
            title: '提示',
            message: h('p', null, [
              h('span', null, '请线下确认考勤数据是否上传，'),
              h(
                'span',
                { style: 'color: #FF4949' },
                '未上传的考勤数据将无法找回'
              ),
              h('span', '，是否确认?'),
            ]),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                this.isSaveLoading = true
                this.EquipmentData()
                done()
              } else {
                done()
              }
            },
          }).then((action) => {})
        } else {
          return false
        }
      })
    },
    EquipmentData() {
      var data = {
        id: this.id,
        remark: this.machineForm.remark,
        type: this.machineForm.type,
        machineNo: this.machineForm.machineNo
          ? this.machineForm.machineNo.replace(/\s+/g, '')
          : '',
        direction: this.machineForm.direction,
        projectId: this.projectId,
        uscc: this.machineForm.uscc,
        pointId: this.machineForm.pointId,
        authCode: this.machineForm.authCode
          ? this.machineForm.authCode.replace(/\s+/g, '')
          : '',
        operator: this.machineForm.operator,
      }

      this.axios({
        method: 'post',
        url: 'api-att/cs/mac/expand/relocat',
        data: data,
      })
        .then((res) => {
          this.isSaveLoading = false
          if (!res.data.hasError) {
            this.$message({
              message: '数据添加成功',
              type: 'success',
            })
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch(() => {
          this.isSaveLoading = false
          this.$message.error('添加数据失败')
        })
    },
    getUpdateData(id) {
      this.id = id
      this.axios({
        method: 'post',
        url: 'api-att/cs/mac/expand/detailInfo',
        data: { id: id },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.machineInfo = res.data.result
            // this.machineForm.type = allData.type;
            // this.machineForm.machineNo = allData.machineNo;
            // this.machineForm.remark = allData.remark;
            // this.machineForm.companyName = allData.companyName;
            // this.machineForm.uscc = allData.uscc;
            // this.machineForm.projectId = allData.projectId;
            // this.machineForm.uscc = allData.uscc;
            // this.machineForm.pointId = allData.pointId;
            // this.machineForm.authCode = allData.authCode;
            // this.machineForm.direction = allData.direction;

            this.$nextTick(() => {
              this.$refs.machineForm.clearValidate()
            })
          } else {
            this.$message.error('获取详情失败')
          }
        })
        .catch(() => {
          this.$message.error('获取数据失败')
        })
    },
    goBack() {
      this.$router.push({
        path: '/home/operationManage/equipmentMonitor',
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/operationManage/equipmentMonitor',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    logHandleClose() {
      this.logVisible = false
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    getpageSize(val) {
      this.logPageSize = val
    },
    getpageNo(val) {
      this.logPageNo = val
    },
  },
}
</script>

<style scoped lang="less">
.container {
  position: absolute;
  top: 130px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  // background: #fff;
  overflow: hidden;
  .mainCon {
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 24px;
    padding-top: 24px;
    .labelWidth {
      width: 126px;
      font-size: 14px;
      color: #666666;
      display: inline-block;
      height: 36px;
      text-align: right;
    }

    .information {
      font-size: 14px;
      color: #151515;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .detailInfo {
      padding: 18px 0 5px 0;
    }

    .detailInfoItem {
      margin-top: 28px;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
  }
  .selectWidth {
    width: 40%;
  }
  .titleBox {
    border: none;
    background: #e4ebf1;
    padding: 14px 24px;
    margin-bottom: 0px;
    .blockTitle {
      font-weight: bold;
      font-size: 18px;
      color: #333;
      line-height: 40px;
    }
  }
  .moveSty {
    position: absolute;
    right: 24px;
    top: 18px;
  }
}

.cancelBtn {
  margin-left: 0;
}

.submitBtn {
  margin: 24px auto 30px;
}
</style>
